<template>
  <div>
    <el-row :gutter="20">
      <el-col class="box" style="text-align:center" :span="18" :offset="3">
        <p style="font-size: 50px;margin-top: 150px;">研究领域可视化分析，相关文献深度挖掘</p>
      </el-col>
    </el-row>
    <el-row style="margin-top:30px" :gutter="20">
      <el-col :span="12" :offset="3">
        <el-tag class="large-tag">dna计算</el-tag>
        <a v-for="i in 5" :key="i" href="#" class="charitem">
          <span class="charinfo">
            研究趋势
          </span>
        </a>

        <el-tabs style="margin-top:20px;">
          <el-tab-pane label="经典论文">
            <item v-for="o in 8" :key="o" />
          </el-tab-pane>
          <el-tab-pane label="最新发表">配置管理</el-tab-pane>
          <el-tab-pane label="综述论文">角色管理</el-tab-pane>
          <el-tab-pane label="学位论文">学位论文</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="5" :offset="1">
        <el-input style=" margin-bottom: 20px;" v-model="keyword" placeholder="添加关键字">
          <template slot="prepend">
            <i class="el-icon-plus"></i>
          </template>
        </el-input>
        <el-tag>dna计算</el-tag>
        <p class="des">推荐关键词（点击直接添加）</p>
        <el-tag class="info-tag" v-for="(tag,i) in tags" :key="i" type="info">
          {{ tag }}
        </el-tag>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Item from '../components/paper-item/paper-item';
export default {
  data() {
    return {
      keyword: '',
      tags: [
        '遗传算法',
        'np-完全问题',
        'dna计算机',
        'dna密码',
        '可满足问题',
        '汉明距离'
      ]
    };
  },
  components: {
    Item
  }
};
</script>

<style lang="scss" scoped>
.box {
  background-image: url(http://xueshu.baidu.com/lib/static/scholar/cache/biye/img/paper_bg_8e9eee5.jpg) !important;
  background-position: center center;
  height: 360px;
  // margin-top: -25px;
  color: #ffffff;
}

.large-tag {
  font-size: 20px;
  width: 100%;
  border-radius: 25px;
  display: block;
  margin-bottom: 20px;
}

.charitem {
  display: inline-block;
  position: relative;
  width: 240px;
  height: 200px;
  margin-right: -1px;
  margin-bottom: -1px;
  background-color: #f7fdff;
  color: #505961;
  font-size: 13px;
  text-align: center;
  vertical-align: top;
  border: 1px solid #c6ecf5;
  text-decoration: none;
  .charinfo {
    position: relative;
    z-index: 10;
    display: block;
    margin-top: 90px;
  }
}

.des {
  color: #999;
  font-size: 14px;
  margin: 25px 0 0;
  margin-bottom: 20px;
}

.info-tag {
  margin: 5px;
}
</style>
